<template>
	<view class="moment-list">
		<u-button type="primary" @click="$emit('publish')">发布日志</u-button>

		<u-list>
			<u-list-item v-for="moment in moments" :key="moment.id">
				<u-card :title="moment.author" :thumb="getAuthorAvatar(moment.authorId)"
					@head-click="$emit('view-author', moment.authorId)">
					<view slot="body">
						<text>{{moment.content}}</text>
						<u-grid v-if="moment.images.length  > 0" col="3">
							<u-grid-item v-for="(img, index) in moment.images" :key="index">
								<u-image :src="img" width="100%" height="200rpx" mode="aspectFill"
									@click="previewImages(moment.images,  index)"></u-image>
							</u-grid-item>
						</u-grid>
					</view>
					<view slot="foot">
						<view class="actions">
							<view class="action-item" @click="$emit('like', moment.id)">
								<u-icon name="thumb-up" size="20"
									:color="moment.liked  ? '#2979ff' : '#606266'"></u-icon>
								<text>{{moment.likes}}</text>
							</view>
							<view class="action-item" @click="$emit('view-detail', moment.id)">
								<u-icon name="chat" size="20" color="#606266"></u-icon>
								<text>{{moment.comments.length}}</text>
							</view>
						</view>
					</view>
				</u-card>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		props: {
			moments: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			getAuthorAvatar(authorId) {
				// 在实际应用中，应该从联系人数据中获取
				return `/static/avatars/${authorId % 10 + 1}.jpg`
			},
			previewImages(images, current) {
				uni.previewImage({
					current: images[current],
					urls: images,
				})
			}
		}
		
	}
</script>

<style scoped>
	.actions {
		display: flex;
		align-items: center;
	}

	.action-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.action-item text {
		margin-left: 10rpx;
	}
</style>